<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <!--高级查询的值-->
          <el-input v-model="filters.keyword" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getLog">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="log" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="userid" label="用户名" width="90" sortable>
      </el-table-column>
      <el-table-column prop="ip" label="ip地址" width="" sortable>
      </el-table-column>
      <el-table-column prop="url" label="地址" width="200" sortable>
      </el-table-column>
      <el-table-column prop="method" label="方法名" width="180" sortable>
      </el-table-column>
      <el-table-column prop="operation" label="详情信息" width="180" sortable>
      </el-table-column>
      <el-table-column prop="createtime" label="执行时间" width="100" sortable>
      </el-table-column>
    </el-table>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
        </el-pagination>
      </el-col>

  </section>
</template>
<script>
import util from '../../common/js/util'
//import NProgress from 'nprogress'4120..
import { getEmployeeListPage, removeEmployee, batchRemoveEmployee, editEmployee, addEmployee } from '../../api/api';

export default {
  data() {
    return {
      filters: {
        keyword: ''
      },
      pageSize:5,
      total: 0,
      pageNum: 1,
      listLoading: false,
      sels: [],//列表选中列
      title:"",
      editFormVisible: false,//编辑界面是否显示
      editLoading: false,
      editFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.pageNum = val;//设置页面
      this.getLog();//查询数据
    },
    //获取员工列表
    getLog() {
      let para = {//封装查询条件
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        keyword:this.filters.keyword
      };
      this.listLoading = true;//忙等
      //NProgress.start();
      //调用后台
      this.$http.post("/log",para)
          .then(result=>{
            this.listLoading = false;//关闭忙等框
            result = result.data;//PageList
            this.log = result.rows;
            this.total = result.total;
            console.log(this.total)
          })
          .catch(result=>{
            console.log(result);
          })
    },
    selsChange: function (sels) {
      this.sels = sels;
    },
  },
  mounted() {
    this.getLog();
  }
}

</script>

<style scoped>

</style>